﻿@import "common.css";

/*Index*/
.kui-layout {width:100%;height:100%;}
.kui-header, .header,
.kui-sider, .sider {position:absolute;top:0;}
.kui-header, .header {left:180px;right:0;height:50px;}
.kui-sider, .sider {left:0;bottom:0;width:180px;overflow:hidden;/*background:linear-gradient(#1c66b9, #1c66b9);*/}
.kui-scroll, .kui-body, .body {position:absolute;top:50px;bottom:0;}
.kui-scroll {left:0;width:190px;overflow-x:hidden;}
.kui-body, .body {left:180px;right:0;overflow:auto;}
.kui-sider .icon {width:16px;height:16px;margin-right:2px;text-align:center;}

.kui-header, .header {background-color:#fff;color:#333;}
.kui-sider, .sider, .logo {background-color:var(--theme-color);color:#fff;}
.kui-body, .body, #tb-Home {background-color:#f1f1f1;}

.layout-tl .logo, 
.layout-tl .kui-header,
.layout-tl .header {background-color:var(--theme-color);color:#fff;}
.layout-tl .kui-sider, 
.layout-tl .sider {background-color:var(--sider-color);color:#fff;}

/*header*/
.kui-header, .nav {display:flex;}
.kui-header {justify-content:space-between;}
.toggleMenu, .appName, .logo {height:50px;line-height:50px;}
.toggleMenu {text-align:center;width:50px;cursor:pointer;}
.appName {font-size:1.2rem;margin-left:10px;}
.tenantName {margin-right:10px;}
.logo {overflow:hidden;opacity:0.9;}
.logo img {width:auto;height:100%;}
.logo:before {margin-right:15px;}
.topMenu {display:flex;}
.topMenu li {height:47px;text-align:center;padding:0 15px;cursor:pointer;}
.topMenu li .icon {display:none;font-size:1.2rem;margin-top:5px;}
.topMenu li .name {display:block;font-size:1.1rem;margin-top:12px;}
.topMenu li.active {border-bottom:3px solid #1c66b9;}
.nav {box-sizing:border-box;padding-right:10px;}
.nav-item {position:relative;cursor:pointer;}
.nav .nav-item:before {font-size:1.2rem;}
.nav .nav-item {display:inline-block;line-height:49px;padding:0 10px;}
.nav .nav-item .text {font-size:1rem;}
.nav .nav-item .badge-top {top:5px;}
.nav .nav-item:hover {-moz-opacity:0.8;opacity:0.8;filter:alpha(opacity=80);}
.nav .nav-item.text:hover {background-color:inherit;}
.nav-child {display:none;top:50px;right:5px;-webkit-transition:all .3s;transition:all .3s;}
.nav-child.show {display:block;}

/*sider*/
.side-user {text-align:center;padding-top:20px;}
.side-user img {width:60px;height:60px;margin:0 auto;}
.side-user .name {display:block;font-size:1rem;font-weight:bold;}

/*body*/
.kui-tips-tr, .kui-tips-bl {position:absolute;font-weight:bold;z-index:9999;padding:15px 10px 10px 10px;}
.kui-tips-tr {top:0;right:0;}
.kui-tips-bl {left:0;bottom:0;}

.kui-tabs {display:block;border-top:1px solid var(--border);}
.kui-tab {
    height:40px;display:flex;justify-content:space-between;
    background-color:#fff;border-bottom:1px solid var(--border);box-shadow:0 1px 1px 0 #eee;
}
.kui-tab .tab > li {border-bottom:4px solid transparent;}
.kui-tab .tab > li.active {border-bottom-color:var(--tab-active);}
.kui-tab > .tab {border-bottom:1px solid var(--border);}
.kui-tab > .icon, .kui-tab > .dropdown > .icon {color:#333;width:40px;line-height:40px;text-align:center;cursor:pointer;}
.kui-tab > .icon {border-left:1px solid var(--border);border-right:1px solid var(--border);}
.kui-tab > .dropdown {width:40px;}
.kui-tab > .dropdown > .icon {top:0;right:0;}
.kui-tab > .dropdown > .icon:before {content:"\f078";}
.kui-tab > .dropdown > .child {top:40px;}

.kui-tabs > .tab-body {display:none;position:absolute;top:50px;left:0;right:0;bottom:0;padding:10px;overflow:auto;}
.kui-tabs > .tab-body.active {display:grid;}

.kui-content {display:grid;position:absolute;top:40px;}
.kui-content, .kui-tabs > .tab-body {
    left:10px;bottom:10px;right:10px;padding:10px;overflow:auto;
    border-top:3px solid var(--border);background-color:#fff;
    box-shadow:0 0 10px 3px rgba(0,0,0,.1);
}
#tb-Home {border:none;top:42px;bottom:0;left:0;right:0;box-shadow:none;}

/*mini side*/
.kui-mini .kui-sider {width:50px;}
.kui-mini .kui-scroll {width:60px;}
.kui-mini .kui-header, .kui-mini .kui-body {left:50px;}
.kui-mini .menu-tree .item {padding-left:12px;}
.kui-mini .menu-tree .name {display:none;}

@media screen and (max-width:768px) {
    .kui-sider {width:50px;}
    .kui-scroll {width:60px;}
    .kui-header, .kui-body {left:50px;}
    .toggleMenu {display:none;}
    .menu-tree > li > ul > li > .item {padding-left:12px;}
    .menu-tree .name {display:none;}
}

@media screen and (max-width:400px) {
    .appName {display:none;}
}

/*view*/
.lr-view {display:flex;}
.left-view, .right-view {display:grid;position:relative;overflow:auto;} 
.left-view {width:20%;} 
.right-view {width:80%;}
.left-view {border-right:1px solid var(--border);}
.right-view .tab li {margin-left:0;}
.right-view .grid-view {left:10px;}
.kui-content > .grid-view, .tab-body > .grid-view {top:10px;left:10px;right:10px;bottom:10px;}

@media screen and (max-width:768px) {
    .lr-view {flex-direction:column;}
    .left-view, .right-view {width:100%;}
    .left-view {border-right:none;border-bottom:1px solid var(--border);padding-bottom:1rem;margin-bottom:1rem;}
    .right-view {min-height:500px;}
    .right-view .grid-view {left:0;}
}

label.required:before, th.required:before {content:'*';color:#f00;padding-right:2px;}
button, .button, input, select, 
.form-item .link,
.form-input > span, .form-input .text, .form-input .unit, .form-input .btn, .form-input .link, 
.form-label, .form-text, .form-radio, .form-tips {height:2rem;line-height:2rem;}
.form-input .captcha {width:86px;height:2rem;}
.form-input > pre {margin-top:0.3rem;}
.form-radio .switch[type="checkbox"]+span:before {top:0.35rem;}
.form-radio .switch[type="checkbox"]+span:after {top:0.51rem;}
.table .form-radio .switch[type="checkbox"]+span:before {top:0;}
.table .form-radio .switch[type="checkbox"]+span:after {top:0.2rem;}
.form-list {position:absolute;left:0;right:0;top:80px;bottom:0;}
.form-list .grid-view {top:0;bottom:0;left:0;right:0;}

/*SysModule*/
.module .inline {justify-content:space-between;}
.module .table .action {width:140px;}
.module .form-list .table .action {width:80px;}
.module .tool {position:absolute;top:-2.2rem;right:5px;}
.module .tool .form-item {margin:0;padding:0;}

@media screen and (max-width:768px) {
    label.required:before, th.required:before {display:none;}
    label.required:after, th.required:after {content:'*';color:#f00;padding-right:2px;}
    .module .form-body {height:1000px;}
}

/*Install*/
.install {position:absolute;top:50%;left:50%;width:500px;height:520px;margin-left:-250px;margin-top:-260px;}
.install .title {margin:20px 0;font-size:2rem;font-weight:bold;text-align:center;}
.install .form-body {border:none;}
.install .form-label {width:120px;text-align:right;}
.install .form-input {width:250px;display:inline-block;}
.install .form-button {text-align:center;margin-top:10px;}
.install button {margin:0;padding:0 35px;height:40px;line-height:40px;}

@media screen and (max-width:768px) {
    .install {position:static;margin:0;padding:0;width:100%;height:100%;overflow:auto;}
    .install .form-body {padding:1rem;}
    .install .form-label {text-align:left;padding:0;}
    .install .form-input {width:100%;}
}

/*Login*/
.login {
    position:absolute;top:50%;left:50%;background-color:#fff;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(0%,1fr));
    width:800px;height:400px;margin-left:-400px;margin-top:-200px;
    -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
    box-shadow:0 0 10px 3px rgba(0,0,0,.3);
}
.login-left {margin-top:70px;padding-left:90px;width:320px;height:250px;border-right:1px solid var(--border);}
.login .slogan {width:260px;text-align:center;color:#333;font-size:1.3rem;font-weight:bold;}
.login .image {width:260px;height:180px;margin-top:20px;}
.login-form {padding:50px;}
.login-form .title {padding-left:0;margin-bottom:20px;}
.login-title {font-size:1.3rem;font-weight:bold;margin-bottom:10px;text-align:center;}
.login .form-input {margin-bottom:1rem;}
.login .form-input .icon {left:0;right:unset;color:#d2d2d2;font-size:1.3rem;z-index:1;width:40px;padding-top:9px;}
.login .form-input .fa-lock {font-size:1.6rem;}
.login .form-input input {height:40px;padding-left:40px;background-color:#fff;}
.login .form-input input[type="password"] {padding-right:0;}
.login .form-radio input {height:20px;line-height:20px;}
.login .captcha {height:40px;}
.login button {width:100%;height:40px;margin-left:0;}
.login-msg {color:#d9534f;text-align:center;margin-top:0.5rem;}

@media screen and (max-width:768px) {
    .login {width:80%;margin-left:-40%;}
    .login-left {display:none;}
    .login-form {padding:50px 20px;}
}

.ss-form .form-body {padding-top:20px;}
.ss-form .form-label {width:150px;padding-right:15px;text-align:right;}
.ss-form .form-button {padding-left:173px;text-align:left;}
.ss-form .form-input {display:flex;width:70%;}
.ss-form .form-input input {width:40%;}
.ss-form .form-input textarea, .ss-form .form-input pre {width:80%;}
.ss-form .form-input pre {text-align:justify;}
.ss-terms textarea, .ss-form textarea {height:5rem;}

/*SysSystem*/
.ss-system {padding:20px 60px;}
.ss-system .form-input input {width:200px;}
.ss-copyright .form-input input {width:300px;}

@media screen and (max-width:768px) {
    .ss-system {padding:10px;}
    .ss-form .form-label {text-align:left;padding:0;}
    .ss-form .form-button {padding-left:0;}
    .ss-form .form-input, .ss-form .form-input input, .ss-form .form-input textarea {width:100%;}
    
    .ss-system .form-input input {width:200px;}
    .ss-copyright .form-input input {width:300px;}
}

/*UserAccount*/
.user-info {display:flex;flex-direction:column;}
.user-info .avatar {text-align:center;}
.user-info img {width:100px;height:100px;margin:20px auto;}
.user-info .form-item {height:1rem;line-height:1rem;text-align:justify;}
.user-info .form-item .icon {width:1.2rem;text-align:center;margin-right:0.5rem;color:var(--primary);}
.user-info .form-item span {color:#333;font-size:0.9rem;}

.user-message .data-top {padding-top:10px;}
.user-message .form-label {width:auto;}
.user-message .form {margin-top:10px;}
.user-message .form-button {padding:10px;text-align:center;}
.user-message .noread {font-weight:bold;color:#000;}

@media screen and (max-width:768px) {
    .user-info {flex-direction:row;padding-bottom:1rem;}
    .user-info .form-item {flex-direction:row;}
}

/*font*/
.slayout .checked:after {font:normal normal normal 1rem FontAwesome;}

/*SysSetting*/
#qvSysSetting, .ss-form .layout .form-input {width:300px;}
#qvSysSetting .form-label {width:80px;}
#qvSysSetting select {width:auto;}
#qvSysSetting .layout {flex-direction:column;}
#qvSysSetting .layout .form-label {width:100%;}
.slayout {float:left;position:relative;width:45%;height:80px;margin:2% 2% 0 2%;}
.slayout > div {width:100%;height:100%;border:1px solid var(--border);}
.slayout .checked:after {display:block;content:'\f00c';position:absolute;right:1px;bottom:1px;color:#337ab7;font-size:0.5rem;font-weight:bold;}
.ss-form .slayout {margin-left:0;}
.slayout .header {top:1px;height:10px;left:20px;}
.slayout .sider {top:1px;left:1px;width:20px;}
.slayout .body {top:10px;left:21px;}
.slayout .logo {width:20px;height:10px;line-height:10px;}

/*SysDic*/
.form th.dic-extend {text-align:left;line-height:30px;}

/*SysRole*/
.role {grid-template-rows:100%;padding:5px;}
.role .form {padding:0;padding-right:0.5rem;}
.role > .form-button {display:none;}
.role > .form-body {display:grid;grid-template-columns:auto 260px 160px 160px;}
.role .form-button {padding:0;padding-top:0.3rem;}
.role .title {font-weight:bold;height:30px;line-height:30px;padding-left:10px;position:relative;}
.role .title input {position:absolute;top:5px;left:50px;}
.role-module, .role-button, .role-column {display:flex;flex-direction:column;}
.role-module {background-color:#f1f1f1;}
.role-button {background-color:#f5f5f5;}
.role-column {background-color:#f1f1f1;}
.role-button .form-radio, .role-column .form-radio {display:block;}
.role-module .tree {overflow:auto;margin-bottom:10px;}
.role-button .form-input, .role-column .form-input {flex-direction:column;overflow:auto;padding:0 10px;margin-bottom:10px;}

@media screen and (max-width:768px) {
    .role > .form-body {grid-template-columns:100%;}
}